$cubic-bezier: cubic-bezier(.4,0,.49,1);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
  background: #272C34;
  color: #fff;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.circle {
	position: relative;
	overflow: hidden;
	clip-path: circle(90px at 90px 90px);
	width: 180px;
	height: 180px;
	border-radius: 50%;
	
	.sky {
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		right: 0;
		height: 124px;
		background: #7DDFFC;		
		animation: sky-turns-black 4s $cubic-bezier infinite;
	}
	
	.sun {
		position: absolute;
		z-index: 2;
		top: 7px;
		left: 73px;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #FFEF00;
		transform-origin: 50% 400%;
		animation: sun-goes-down 4s $cubic-bezier infinite;
	}
	
	.side-left {
		position: absolute;
		top: 67px;
		left: 35px;
		height: 57px;
		width: 116px;
		background: #F4F4F4;
	  clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
		animation: pyramide-shading 4s $cubic-bezier infinite;
	}
	
	.side-right {
		position: absolute;
		top: 67px;
		left: 93px;
		height: 57px;
		width: 58px;
		background: #DDDADA;
	  clip-path: polygon(30% 100%, 100% 100%, 0% 0%);
		animation: pyramide-shading 4s $cubic-bezier infinite reverse;
	}
	
	.shadow {
		position: absolute;
		z-index: 2;
		top: 124px;
		left: -80px;
		height: 30px;
		width: 360px;
		background: rgba(0,0,0,0.2);
		transform-origin: 50% 0%;
	  clip-path: polygon(115px 0%, 231px 0%, 80% 100%);
		animation: shadow-on-the-floor 4s $cubic-bezier infinite;
	}
	
	.ground {
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		right: 0;
		height: 56px;
		background: #F0DE75;
		animation: fading-sand 4s $cubic-bezier infinite;
	}
}

@keyframes sun-goes-down {
  0% {
		background: #F57209;
    transform: rotate(-70deg);
  }
	
	30% {
		background: #FFEF00;
		transform: rotate(-28deg);
	}
	
	70% {
		background: #FFEF00;
	}

  100% {
		background: #F57209;
    transform: rotate(70deg);
  }
}

@keyframes sky-turns-black {
  0% {
    background: #272C34;
  }
	
	30% {
		background: #7DDFFC;
	}
	
	70% {
		background: #7DDFFC;
	}

  100% {
    background: #272C34;
  }
}

@keyframes pyramide-shading {
  0% {
    background: #272C34;
  }
	
	30% {
		background: #F4F4F4;
	}
	
	70% {
		background: #DDDADA;
	}

  100% {
    background: #272C34;
  }
}

@keyframes shadow-on-the-floor {
  0% {
		transform: scaleY(0);
	  clip-path: polygon(115px 0%, 231px 0%, 100% 100%);
  }
	
	30% {
		transform: scaleY(1);
	  clip-path: polygon(115px 0%, 231px 0%, 80% 100%);
	}
	
	55% {
		transform: scaleY(.4);
	}

	75% {
		transform: scaleY(1);
	}

  100% {
		transform: scaleY(0);
	  clip-path: polygon(115px 0%, 231px 0%, 0% 100%);
  }
}

@keyframes fading-sand {
  0% {
    background: #272C34;
  }
	
	30% {
		background: #F0DE75;
	}
	
	70% {
		background: #F0DE75;
	}

  100% {
    background: #272C34;
  }
}